import { connect } from '@tarojs/redux';
import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image, Input } from '@tarojs/components'
// import { AtTabs, AtTabsPane } from 'taro-ui'
import './index.less'
import searchImg from '../../img/searchimg.png'
// import downArrow from '../../img/downArrow.png'
// import blueDownArrow from '../../img/blueDownArrow.png'

@connect(({ listDetails }) => ({ listDetails }))
export default class listDetails extends Component {

  config = {
    navigationBarTitleText: '智享购'
  }

  state={
    // near:'附近',
    //this.$router.params
    // smart:'智能排序',
    // originalIcon:downArrow,
    // newIcon:blueDownArrow,
  }
  handleClick(id){
    Taro.navigateTo({
      url:`../template/index?id=${id}`
    })
  }

  componentWillMount () {
    const { dispatch } = this.props;
    const {id,item} =this.$router.params;
    console.log('listDetails componentWillMount id,item',id,item);
    dispatch({
      type: 'listDetails/init',
      payload: id
    });
  }

  render () {
    const {details}=this.props.listDetails;
    console.log('listDetails render details',details);
    return (
      <View>
        {/**--------顶部搜索框--------- */}
        <View className='rightSearchBox'>
            <Image src={searchImg} className='searchImg' />
            <Input
              type='text'
              placeholder='请输入商家名、品类或者商圈'
              className='input'
            />
        </View>
        {/*---------筛选
        <View className='screening-box'>
          <Text className='vertica-line-text'>{data.title}</Text>
          <View className='verticalLine' />
          <View>
            <Text className='vertica-line-text'>{this.state.near}</Text>
            <Image src={this.state.originalIcon} className='downBack' />
          </View>
          <View className='verticalLine' />
          <View>
            <Text className='vertica-line-text'>{this.state.smart}</Text>
            <Image src={this.state.originalIcon} className='downBack' />
          </View>
        </View>  ------- */}
        {/*-------具体列表-------- */}
        <View>
          {details.map(item=>(
            <View key={item.id} className='list-box' onClick={this.handleClick.bind(this,item.id)}>
              <View className='list-box-first'>
                <Image src={item.imageHash} className='listImg' />
                <View className='list-box-first-bottom'>
                  <Text className='bottom-name'>{item.name}</Text>
                  <View>
                    <Text className='bottom-title'>{item.title}</Text>
                    <Text className='bottom-price'>￥{item.price}元</Text>
                  </View>
                </View>
              </View>
              <Text className='list-box-address'>{item.address}</Text>
            </View>
          ))}
        </View>

      </View>
    )
  }
}
